@layout("/common/container.html", {"title" : "任务办理"}){
<div class="row">
    <div class="col-md-8 e-block-center">
        <form class="e-form">
            <div class="card">
                @var title = "任务办理 - " + task.name;
                <#card:head title="${title}" icon="la la-bars"/>
                <div class="card-body">
                    <!-- str:业务详情 -->
                    @var businessDetailsUrl = @variables.get("businessDetailsUrl");
                    @if(strUtil.isNotBlank(businessDetailsUrl)){
                        <iframe id="businessDetails" src="${businessDetailsUrl}" frameborder="0" style="width: 100%;height: auto;margin: 0 -10px;"></iframe>
                    @}
                    <!-- end:业务详情 -->
                    <div class="row">
                        <!-- str:表单区域 -->
                        <div class="col-12">
                            <!-- str:发起人动态表单 -->
                            @if(hasStartFormKey){
                                ${startFormData}
                            @} else {
                                @for(property in startFormData.formProperties) {
                                    @if(property.type.name != 'javascript') {
                                        <div class="form-group row">
                                            <label class="col-form-label col-2" for="${property.id}">
                                                ${property.name}：
                                            </label>
                                            <div class="col-9">
                                                @if(property.type.name == 'string') {
                                                    <input type="text" class="form-control" id="${property.id}" name="${property.id}" disabled value="${@variables.get(property.id)}">
                                                @}
                                                @if(property.type.name == 'long') {
                                                    <input type="number" class="form-control" id="${property.id}" name="${property.id}" disabled value="${@variables.get(property.id)}">
                                                @}
                                                @if(property.type.name == 'boolean') {
                                                    <input type="text" class="form-control" id="${property.id}" name="${property.id}" disabled value="${@variables.get(property.id)}">
                                                @}
                                                @if(property.type.name == 'date') {
                                                    @var datePattern = @property.getType().getInformation('datePattern');
                                                    @var valueDate = @variables.get(property.id);
                                                    @var displayValue = dateUtil.format(valueDate, datePattern);
                                                    <input type="text" class="form-control"
                                                           id="${property.id}" name="${property.id}" disabled value="${displayValue}">
                                                @}
                                                @if(property.type.name == 'enum') {
                                                    <select class="form-control select-picker" id="${property.id}" name="${property.id}" data-value="${@variables.get(property.id)}" disabled>
                                                        @for(option in @property.getType().getInformation("values")) {
                                                            <option value="${option.key}">${option.value}</option>
                                                        @}
                                                    </select>
                                                @}
                                            </div>
                                        </div>
                                    @} else {
                                        <script type="text/javascript">${property.value}</script>
                                    @}
                                @}
                            @}
                            <!-- end:发起人动态表单 -->


                            <!-- str:发起人信息 -->
                            <div class="e-separator e-separator--space-sm e-separator--dashed e-margin-t-0"></div>
                            @if(applyUser != null){
                                <div class="form-group row">
                                    <label class="col-form-label col-2">
                                        申请人：
                                    </label>
                                    <div class="col-4">
                                        <span class="form-control form-control-static">[${applyUser.department.name}]${applyUser.nickname}</span>
                                    </div>
                                    <label class="col-form-label col-2">
                                        申请时间：
                                    </label>
                                    <div class="col-4">
                                        <span class="form-control form-control-static">${task.createTime, dateFormat = "yyyy-MM-dd HH:mm"}</span>
                                    </div>
                                </div>
                            @}
                            <!-- str:发起人信息 -->

                            <!-- str:办理人动态表单 -->
                            <div class="e-separator e-separator--space-sm e-separator--dashed"></div>
                            @if(hasFormKey){
                                ${taskFormData}
                            @} else {
                                @for(property in taskFormData.formProperties) {
                                    @if(property.type.name != 'javascript') {
                                    <div class="form-group row">
                                        <label class="col-form-label col-2" for="${property.id}">
                                            @if(@property.isRequired()) {
                                                <span class="required">*</span>
                                            @}
                                            ${property.name}：
                                        </label>
                                        <div class="col-9">
                                            @var commonProperty = null;
                                            @if(@property.isRequired()){
                                                @commonProperty += "required ";
                                            @}
                                            @if(!@property.isWritable()){
                                                @commonProperty += "readonly='true' ";
                                            @}

                                            @if(property.type.name == 'string') {
                                                <input type="text" class="form-control" id="${property.id}" name="${property.id}" ${commonProperty}>
                                            @}
                                            @if(property.type.name == 'long') {
                                                <input type="number" class="form-control" id="${property.id}" name="${property.id}" ${commonProperty}>
                                            @}
                                            @if(property.type.name == 'boolean') {
                                                <input type="text" class="form-control" id="${property.id}" name="${property.id}" ${commonProperty}>
                                            @}
                                            @if(property.type.name == 'date') {
                                                <input type="text" class="form-control date-picker" data-date-format="${strutil.toLowerCase(@property.getType().getInformation('datePattern'))}" id="${property.id}" name="${property.id}" ${commonProperty}>
                                            @}
                                            @if(property.type.name == 'enum') {
                                                <select class="form-control select-picker" id="${property.id}" name="${property.id}" ${commonProperty}>
                                                    @for(option in @property.getType().getInformation("values")) {
                                                        <option value="${option.key}">${option.value}</option>
                                                    @}
                                                </select>
                                            @}
                                        </div>
                                    </div>
                                    @} else {
                                        <script type="text/javascript">${property.value}</script>
                                    @}
                                @}
                            @}
                            <!-- str:办理人动态表单 -->
                        </div>
                        <!-- end:表单区域 -->
                    </div>
                </div>
                <div class="card-foot">
                    <div class="e-form-actions text-center">
                        <button id="submit-task-form" type="button" class="btn btn-success"><i class="la la-check"></i>确定</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!--begin::页面脚本 -->
<script>
    // 任务id
    let taskId = '${taskId}';
</script>
<#script src="static/modular/activiti/task/task-form.js" />
<!--end::页面脚本 -->
@}